var f_1 = $('#f_1');
var f_2 = $('#f_2');
var f_3 = $('#f_3');
var f_4 = $('#f_4');

var selectCloud = $("#selectCloud")
var registration = $("#registration")
var record = $("#record")
var pay = $("#pay")

f_1.on('click',function(){
  selectCloud.removeAttr('hidden');
  registration.attr('hidden','hidden');
  record.attr('hidden','hidden');
  pay.attr('hidden','hidden');

  f_1.attr('class','active');
  f_2.removeAttr('class');
  f_3.removeAttr('class');
  f_4.removeAttr('class');
})

f_2.on('click',function(){
  selectCloud.attr('hidden','hidden');
  registration.removeAttr('hidden');
  record.attr('hidden','hidden');
  pay.attr('hidden','hidden');

  f_2.attr('class','active');
  f_1.removeAttr('class');
  f_3.removeAttr('class');
  f_4.removeAttr('class');
})

f_3.on('click',function(){
  selectCloud.attr('hidden','hidden');
  registration.attr('hidden','hidden');
  record.removeAttr('hidden');
  pay.attr('hidden','hidden');

  f_3.attr('class','active');
  f_1.removeAttr('class');
  f_2.removeAttr('class');
  f_4.removeAttr('class');
})

f_4.on('click',function(){
  selectCloud.attr('hidden','hidden');
  registration.attr('hidden','hidden');
  record.attr('hidden','hidden');
  pay.removeAttr('hidden');

  f_4.attr('class','active');
  f_1.removeAttr('class');
  f_2.removeAttr('class');
  f_3.removeAttr('class');
})
